<template>
	<view class="container pageBg">
		<view class="form-container pageBg">
			<!-- 账号登录 -->
			<view class="input-group">
				<text class="label">账号</text>
				<input v-model="account" class="input" placeholder="请输入账号/邮箱" />
			</view>

			<!-- 密码输入 -->
			<view class="input-group">
				<text class="label">密码</text>
				<input v-model="password" class="input" password placeholder="请输入密码" />
			</view>

			<view class="input-group">
				<text class="label">验证码</text>
				<input v-model="verificationCode" class="input" placeholder="请输入验证码" maxlength="6" />
				<view class="input-group">
					<img class="sms-btn" :src="yanzhengma" @click="getYZM" alt="验证码">
				</view>
			</view>

			<!-- 分割线 -->
			<view class="divider">或</view>

			<!-- 手机验证码登录 -->
			<view class="input-group">
				<text class="label">手机号</text>
				<input v-model="phoneNumber" class="input" type="number" placeholder="请输入手机号" maxlength="11" />
			</view>

			<view class="input-group">
				<text class="label">验证码</text>
				<input v-model="smsCode" class="input" placeholder="请输入验证码" maxlength="6" />
				<button class="sms-btn" :disabled="disableSMS" @click="sendSMS">
					{{ countdownText }}
				</button>
			</view>

			<!-- 操作按钮 -->
			<button class="submit-btn" @click="handleLogin">登录</button>
			<view class="action-links">
				<text @click="navigateToRegister">没有账号？立即注册</text>
				<text @click="navigateToForget">忘记密码？</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'

	// 响应式数据
	const account = ref('')
	const password = ref('')
	const phoneNumber = ref('')
	const smsCode = ref('')
	const count = ref(0)
	const disableSMS = ref(false)
	const yanzhengma = ref('')
	const verifyCodeToken=ref('')
	const verificationCode = ref('')
	/**
	 * 获取验证码
	 */
	const getYZM = async () => {
		try {
			const res = await uni.request({
				url: 'http://localhost:8081/sysUser/generate/verify/code',
				method: 'GET'
			})
			console.log(res)
			yanzhengma.value = `data:image/jpeg;base64,${res.data.result.image}`
			verifyCodeToken.value=res.data.result.verifyCodeToken
		} catch (error) {
			console.error('请求失败:', error)
			uni.showToast({
				title: "验证码获取失败",
				icon: 'none'
			})
		}
	}
	// 页面挂载时自动触发
	onMounted(() => {
		console.log('页面初始化，开始请求验证码...')
		getYZM()
	})
	// 倒计时文本
	const countdownText = computed(() => {
		return count.value > 0 ? `${count.value}s后重新获取` : '获取验证码'
	})

	// 发送验证码
	let timer = null
	const login = () =>{
		uni.request({
			url:"http://localhost:8081/sysUser/login",
			method: 'POST',
			data: {
				account: account.value,
				password: password.value,
				verificationCode: verificationCode.value,
				verifyCodeToken: verifyCodeToken.value,
				phoneNumber:phoneNumber.value
			}
		}).then((res)=>{
			if(res.data.code === '200') {
			    console.log("结果为",res)
				const token = res.data.result.token
				uni.setStorageSync('userInfo', res.data.result)
				uni.setStorageSync('token', token)
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				// 登录成功后的处理
				uni.switchTab({
				  url: '/pages/index/index'
				})
			} else {
				verificationCode.value =""
				getYZM()
				uni.showToast({
					title: res.data.message || '登录失败',
					icon: 'none'
				})
				
			}
		})
	}
	const sendSMS = () => {
		if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
			uni.showToast({
				title: '请输入有效的手机号',
				icon: 'none'
			})
			return
		}

		uni.showLoading({
			title: '发送中...'
		})
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '验证码已发送',
				icon: 'none'
			})
			count.value = 60
			disableSMS.value = true

			timer = setInterval(() => {
				count.value--
				if (count.value <= 0) {
					clearInterval(timer)
					disableSMS.value = false
				}
			}, 1000)
		}, 1000)
	}

	// 处理登录
	const handleLogin = () => {
		// 账号密码登录验证
		if (account.value && password.value) {
			if (password.value.length < 6) {
				uni.showToast({
					title: '密码长度至少6位',
					icon: 'none'
				})
				return
			}
			login()
			return
		}

		// 短信验证码登录验证
		if (phoneNumber.value && smsCode.value) {
			if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
				uni.showToast({
					title: '手机号格式错误',
					icon: 'none'
				})
				return
			}
			
			verificationCode.value=smsCode.value
			login()
			return
		}
		uni.showToast({
			title: '请填写登录信息',
			icon: 'none'
		})
	}

    

	// 跳转注册页面
	const navigateToRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register' // 根据实际路由配置修改
		})
	}

	// 跳转忘记密码
	const navigateToForget = () => {
		uni.navigateTo({
			url: '/pages/unPassword/unPassword' // 根据实际路由配置修改
		})
	}
</script>

<style scoped>
	.container {
		padding: 40rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.form-container {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.input-group {
		margin-bottom: 40rpx;
		position: relative;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.input {
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.sms-btn {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		padding: 0 30rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
	}

	.sms-btn[disabled] {
		background-color: #eee;
		color: #999;
	}

	.submit-btn {
		margin-top: 60rpx;
		background-color: #007AFF;
		color: white;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
	}

	.divider {
		text-align: center;
		margin: 40rpx 0;
		color: #999;
		position: relative;
	}

	.divider::before,
	.divider::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 40%;
		height: 1rpx;
		background-color: #ddd;
	}

	.divider::before {
		left: 0;
	}

	.divider::after {
		right: 0;
	}

	.action-links {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #007AFF;
	}
</style>